<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <link rel="shortcut icon" href="../../image/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../../css/main.css" media="all">
    <link rel="stylesheet" href="../../css/ok/oksub.css">
    <link rel="stylesheet" href="../../css/studentinfo.css">
    <link rel="stylesheet" href="../../libs/layui/css/modules/cropper.css">
    <script type="text/javascript" src="../../libs/loading/okLoading.js"></script>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <!-- 内容   -->
    <div class="layui-container" style="margin-top: 20px">
        <!--  顶部信息    -->
        <div class="layui-row">
            <div class="layui-col-md4">
                <div id="changeimg" class="layui-inline" style="transform: translateX(25%)">
                    <a id="uploadTX" href="javascript:" class="chooseimg">更改</a>
                    <img id="stuimg" src="../../imgs/tx001.jpg" width="250" height="250" class="layui-circle">
                </div>
            </div>
            <div class="layui-col-md8">
                <fieldset class="layui-elem-field" style="margin-top: 10px">
                    <legend>学号</legend>
                    <div class="layui-field-box">
                        <blockquote class="layui-elem-quote" id="stuid" style="font-size: 18px;"></blockquote>
                    </div>
                </fieldset>
                <fieldset class="layui-elem-field">
                    <legend>姓名</legend>
                    <div class="layui-field-box">
                        <blockquote class="layui-elem-quote" id="stuname" style="font-size: 18px;"></blockquote>
                    </div>
                </fieldset>
            </div>
        </div>
        <!-- 详细信息       -->
        <div class="layui-card" style="margin-top: 15px">
            <div class="layui-card-header">
                <b style="font-size: 18px">个人信息</b><a id="editinfo" href="javascript:" title="编辑信息"
                                                      style="margin-left: 250px;">编辑</a>
            </div>
            <div class="layui-card-body" id="infocontent">
                <!--   个人信息  -->
                <form class="layui-form" lay-filter="stuinfo">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">身份证号码</label>
                            <div class="layui-input-block">
                                <input type="text" name="idnumber" lay-verify="required|identity"
                                       lay-reqtext="身份证是必填项，岂能为空？"
                                       placeholder="请输入身份证号码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">联系电话</label>
                            <div class="layui-input-block">
                                <input type="text" name="phonenumber" lay-verify="required|phone"
                                       lay-reqtext="联系电话是必填项，岂能为空？"
                                       placeholder="请输入联系电话" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">出生日期</label>
                            <div class="layui-input-block">
                                <input type="text" name="dateofbirth" id="dateofbirth" lay-verify="required|date"
                                       placeholder="yyyy-MM-dd"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-inline">
                                <input type="radio" name="sex" value="男" title="男" checked="">
                                <input type="radio" name="sex" value="女" title="女">
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">邮箱</label>
                            <div class="layui-input-block">
                                <input type="text" name="email" lay-verify="email"
                                       placeholder="请输入邮箱" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">学历</label>
                            <div class="layui-input-inline">
                                <select name="education">
                                    <option value=""></option>
                                    <option value="不限">不限</option>
                                    <option value="初中及以下">初中及以下</option>
                                    <option value="中专/中技">中专/中技</option>
                                    <option value="高中">高中</option>
                                    <option value="大专">大专</option>
                                    <option value="本科">本科</option>
                                    <option value="硕士">硕士</option>
                                    <option value="博士">博士</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">居住地址</label>
                            <div class="layui-input-block">
                                <input type="text" name="address" placeholder="请输入居住地址" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">毕业年份</label>
                            <div class="layui-input-block">
                                <input type="text" name="graduation" id="graduation" lay-verify="required|date"
                                       placeholder="yyyy-MM-dd"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">婚姻状况</label>
                        <div class="layui-input-inline">
                            <input type="radio" name="marriagestatus" value="已婚" title="已婚" checked="">
                            <input type="radio" name="marriagestatus" value="未婚" title="未婚">
                        </div>
                    </div>
                    <div class="layui-form-item" id="subdata-item" style="">
                        <div class="layui-input-block">
                            <button type="submit" class="layui-btn" lay-submit="" lay-filter="upinfo">提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="../../libs/layui/layui.js"></script>
<script src="../../libs/layui/lay/modules/cropper.js"></script>
<script src="../../js/model.js"></script>
<script>
    layui.use(['laytpl', 'layer', 'form', 'upload', 'jquery', 'element', 'laydate', 'okLayer', 'croppers'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let laydate = layui.laydate;
        let $ = layui.jquery;
        let croppers = layui.croppers;

        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();
        // 获取student
        var student = JSON.parse(window.sessionStorage.getItem("student"));

        //头像上传
        croppers.render({
            elem: '#uploadTX'
            , saveW: 250     //保存宽度
            , saveH: 250
            , mark: 1 / 1    //选取比例
            , area: '900px'  //弹窗宽度
            , url: ctx + "/upload/singleImageUpload?diridentity=" + student.stuid  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
            , done: function (url) { //上传完毕回调
                var stuid = student.stuid;
                var realname = student.realname;
                var classid = student.clzaa.clazzid;
                var cuestudet = new Student(stuid, realname, null, null, null, null, url, null, null, null, null, null, null, new Clzaa(classid));
                $.ajax({
                    url: ctx + '/ygssecs/upstudentinfo',
                    type: 'post',
                    data: {stujson: JSON.stringify(cuestudet)},
                    dataType: 'json'
                }).done(function (res) {
                    if (res.code == 200) {
                        layer.msg("头像修改成功", {icon: 1, time: 1000}, function () {
                            parent.location.reload();
                        })
                    }
                }).fail(function (e) {

                })
            }
        })

        initializationdata();
        disableedit();

        //初始化数据
        function initializationdata() {
            $.ajax({
                url: ctx + '/ygssecs/getstudentbyid',
                type: 'get',
                dataType: 'json',
                data: {stuid: student.stuid}
            }).done(function (res) {
                okLoading.close()
                var studata = res.data;
                $("#stuid").html(studata.stuid)
                $("#stuname").html(studata.realname)
                $("#stuimg").attr('src', studata.photo);
                binddata(studata);
            }).fail(function (e) {
                console.error(e)
            })
        }

        //出生日期选择框
        laydate.render({
            elem: '#dateofbirth',
            max: 0
        });
        //毕业年份
        laydate.render({
            elem: '#graduation',
        });
        //编辑事件绑定
        $("#editinfo").bind('click', function () {
            enableedit();
        });

        //禁止编辑
        function disableedit() {
            $(".layui-input-block > input").attr("disabled", 'disabled')
            $("#subdata-item").attr("style", "display: none")

        }

        //允许编辑
        function enableedit() {
            $(".layui-input-block > input").removeAttr("disabled")
            $("#subdata-item").attr("style", "")
        }

        //渲染数据
        function binddata(studata) {
            form.val('stuinfo', studata);
        }

        /**
         * 重写邮箱验证
         */
        form.verify({
            email: function (val) {
                //值不为空的时候再走验证
                if (val != "") {
                    if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(val)) {
                        return "邮箱格式不正确";
                    }
                }
            }
        });

        form.on('submit(upinfo)', function (data) {
            var stuid = student.stuid;
            var realname = student.realname;
            var classid = student.clzaa.clazzid;
            var cuestudet = new Student(stuid, realname, null, data.field.sex, data.field.idnumber, data.field.dateofbirth, null, data.field.phonenumber, data.field.email, data.field.education, data.field.address, data.field.graduation, data.field.marriagestatus, new Clzaa(classid));
            $.ajax({
                url: ctx + '/ygssecs/upstudentinfo',
                type: 'post',
                dataType: 'json',
                data: {stujson: JSON.stringify(cuestudet)},
                beforeSend: function () {
                    layer.load()
                }
            }).done(function (res) {
                layer.closeAll()
                if (res.code == 200) {
                    layer.msg(res.msg, {icon: 1, time: 1000}, function () {
                        location.reload()
                    })
                } else {
                    layer.msg(res.msg, {icon: 2, time: 1000}, function () {
                        location.reload()
                    })
                }
            }).fail(function (e) {
                console.log(e)
            })
            return false;
        })

    })
</script>
</body>
</html>